<template>
  <div v-if="viewStatus === 'EMPTY'" key="empty" class="empty_view col-center item-center">
    <span>{{ emptyText }}</span>
  </div>

  <div key="error" v-else-if="viewStatus === 'ERROR'" class="empty_view col-center item-center">
    <span class="animate__animated animate__headShake">{{ res.msg }}</span>
  </div>

  <div
    v-else
    key="loadingOrContent"
    :class="[viewStatus === 'LOADING' ? 'skeleton-view-empty-view' : 'skeleton-view-default-view']"
  >
    <slot :data="res.data" :mask="viewStatus === 'LOADING' ? 'skeleton-mask' : ''"></slot>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed, PropType } from 'vue'
  import { MyResponse } from '@/type'

  type ViewStatusType = 'LOADING' | 'EMPTY' | 'SHOW' | 'ERROR'

  interface ClamProps {
    res: MyResponse<any>
    showLoading: boolean
    emptyText: string
  }

  export default defineComponent({
    name: 'ClamView',
    props: {
      res: {
        type: Object as PropType<MyResponse<any>>,
        required: true
      },
      showLoading: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      emptyText: {
        type: String,
        default: () => {
          return '暂无数据'
        }
      }
    },
    setup(props: ClamProps) {
      const viewStatusAdapter = (response: MyResponse<any>): ViewStatusType => {
        // console.log('----viewStatusAdapter----',response)

        if (!response) {
          return 'LOADING'
        }

        if (response.isLoading()) {
          return 'LOADING'
        }

        if (response.success) {
          if (response.isEmpty()) {
            return 'EMPTY'
          }
          return 'SHOW'
        } else {
          return 'ERROR'
        }
      }

      const viewStatus = computed<ViewStatusType>(() => {
        return viewStatusAdapter(props.res)
      })

      return {
        viewStatus
      }
    }
  })
</script>
<style scoped>
  @import url('./clam_view.css');
  @import url('../../assets/css/skeleton.css');
</style>
